<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('检查结果')"/>
    <th:block th:include="include :: summernote-css" />
    <style>
        @media print {
            .fixed-table-toolbar {
                display: none;
            }

            .fixed-table-pagination {
                display: none !important;
            }
        }

        @page {
            size: auto;
            margin: 0mm;
        }
    </style>
</head>
<body>
<div class="main-content">
    <div class="meagan" style="width: 100%;height: 100%; position: fixed;top:0;left:0;z-index:3;display:none"></div>
    <div class="row">
        <div class="btn-group-sm" id="toolbar" role="group">
            <a class="btn btn-success col-sm-1 col-sm-offset-10" onclick="printHtml();">
                <i class="glyphicon glyphicon-print icon-share"></i> 打印
            </a>
        </div>
        <div class="col-sm-12" style="text-align: center; font-size: 20px;">危险源点：
            <span style="color: #ed5565;" id="hazardName"></span>
        </div>
        <div class="col-sm-12" style="text-align: center; font-size: 20px;">管控措施：
            <span  id="measures"></span>
        </div>
        <div class="col-sm-12">
            <div class="col-sm-12 select-table">
            </div>
        </div>
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5 style="color: #6379bb; font-weight: 500; font-size: 15px;">督查意见</h5>
                    <span style="float: right;" id="caozuo">
                        <button id="edit" class="btn btn-primary btn-xs m-l-sm" onclick="edit()" type="button">编辑</button>
<!--                        <button id="sign" class="btn btn-info  btn-xs" onclick="sign()" type="button">签字盖章</button>-->
                        <button id="save" class="btn btn-success  btn-xs" onclick="save()" type="button">保存</button>
                    </span>
                </div>
                <div class="ibox-content" id="eg">
                    <div class="click2edit wrapper" style="display: block;"></div>
                </div>
            </div>
        </div>
    </div>
    <!--大图盒子-->
    <div id="outerdiv"
         style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:999;width:100%;height:100%;display:none;">
        <div id="innerdiv" style="position:absolute;">
            <img id="bigimg" style="border:5px solid #fff;" src="" />
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: summernote-js" />
<script th:inline="javascript">
    var prefix = ctx + "control/result";
    var preview = "/sys/common/view/";
    var id = [[${id}]];
    var $click = $('.click2edit');
    var $eg = $("#eg");

    $(function () {
        $.get($.common.setURL(prefix + "/getResult/" + id), function (data) {
            var res = data.checkResult;
            var photoLists = data.photoList;
            $eg.removeClass("no-padding");
            $click.summernote('code',res.opinion ? res.opinion : "暂无内容");
            $click.summernote('destroy');
            $("#hazardName").html(res.hazardName ? res.hazardName : "无");
            $("#measures").html(res.measures ? res.measures : "无");
            const $base = $(".select-table").html(res.result).children("div");
            $base.children("p").children("span").each((key,dom) => {
                var dateStr = $(dom).html();
                if(dateStr.isChinese()){
                    $(dom).css("padding-right", "200px");
                    if(dateStr.indexOf("检查人签字") >= 0){
                        dateStr = dateStr.replace(/[^\u4e00-\u9fa5]/gi,"") + ":";
                        dateStr += res.checkName;
                        dateStr.html('<img th:src="@{\'/sys/common/view/\' + res.checkName }">');
                    // <img th:src= "@{'+'/sys/common/view/'+res.checkName+'}"/>

                        $(dom).html(dateStr);
                    }
                    if(dateStr.indexOf("日期") >= 0){
                        dateStr = dateStr.replace(/[^\u4e00-\u9fa5]/gi,"") + ":";
                        dateStr += res.checkTime;
                        $(dom).html(dateStr).css("padding-right", "0px");
                    }
                }
            });

            if(photoLists.length > 0){
                $base.find("input").each((key,dom) => {
                    const input = $(dom);
                    if(input.attr("type") === "checkbox"){
                        if (input.is(":checked")) {
                            var normal = "";
                            if(input.parent().siblings()){
                                input.parent().siblings().each((key,dom) => {
                                    var st = $(dom).html().trim();
                                    if(st.indexOf("<input") === -1){
                                        normal += st ? st : "";
                                    }
                                });
                            }
                            if(input.parent().siblings().size() === 0){
                                var str = input.parent().html();
                                normal = str.substring(0, str.indexOf("<input")).trim();
                            }

                            var point_len = normal.indexOf("：");
                            if(point_len >= 0){
                                normal = normal.substring(0, point_len);
                            }
                            photoLists.forEach(value=>{
                                if(value.checkInfo === normal){
                                    input.parent().append("<i class=\"fa fa-photo\" onclick=\"seePhoto('"+ value.photo +"')\"></i>")
                                }
                            })
                        }
                    }
                });
            }

        })
    });

    // 图片预览
    function seePhoto(photo) {
        loadImage(preview + photo);
    }
    // 显示图片
    function loadImage(url) {
        var img = new Image(); img.src = url;
        if(img.complete){ // 如果图片已经存在于浏览器缓存
            var _this = $("<img src="+ url+">");
            imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
            return; // 直接返回，不用再处理onload事件
        }
        $(".meagan").show();
        //图片下载完毕时执行
        img.onload = function() {
            $(".meagan").hide();
            var _this = $("<img src="+ url+">");
            imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
        };
    }

    function imgShow(outerdiv, innerdiv, bigimg, _this){
        var src = _this.attr("src");//获取当前点击的pimg元素中的src属性
        $(bigimg).attr("src", src);//设置#bigimg元素的src属性

        /*获取当前点击图片的真实大小，并显示弹出层及大图*/
        $("<img/>").attr("src", src).load(function(){
            var windowW = $(window).width();//获取当前窗口宽度
            var windowH = $(window).height();//获取当前窗口高度
            var realWidth = this.width;//获取图片真实宽度
            var realHeight = this.height;//获取图片真实高度
            var imgWidth, imgHeight;
            var scale = 0.9;//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放

            if(realHeight>windowH*scale) {//判断图片高度
                imgHeight = windowH*scale;//如大于窗口高度，图片高度进行缩放
                imgWidth = imgHeight/realHeight*realWidth;//等比例缩放宽度
                if(imgWidth>windowW*scale) {//如宽度扔大于窗口宽度
                    imgWidth = windowW*scale;//再对宽度进行缩放
                }
            } else if(realWidth>windowW*scale) {//如图片高度合适，判断图片宽度
                imgWidth = windowW*scale;//如大于窗口宽度，图片宽度进行缩放
                imgHeight = imgWidth/realWidth*realHeight;//等比例缩放高度
            } else {//如果图片真实高度和宽度都符合要求，高宽不变
                imgWidth = realWidth;
                imgHeight = realHeight;
            }
            $(bigimg).css("width",imgWidth);//以最终的宽度对图片缩放

            var w = (windowW-imgWidth)/2;//计算图片与窗口左边距
            var h = (windowH-imgHeight)/2;//计算图片与窗口上边距
            $(innerdiv).css({"top":h, "left":w});//设置#innerdiv的top和left属性
            $(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg
        });
        $(outerdiv).click(function(){//再次点击淡出消失弹出层
            $(this).fadeOut("fast");
        });
    }

    var edit = function () {
        $eg.addClass("no-padding");
        $click.summernote({
            lang: 'zh-CN',
            focus: true,
            height:800,
        });
    };


    //保存
    var save = function () {
        $eg.removeClass("no-padding");
        var aHTML = $click.summernote('code');
        $click.summernote('destroy');
        $.post($.common.setURL(prefix + "/addOpinion"),{
            "id": id,
            "opinion": aHTML
        },function (res) {
            if(res.success){
                layer.msg(res.message, {icon: 1});
            }
        })
    };

    String.prototype.isChinese = function () {
        var reg = /[^\x00-\xff]/ig;//判断是否存在中文和全角字符
        //var reg=/[A-Za-z]*[a-z0-9_-]|\s$/;//判断是否包含数字字母下划线  当使用这个时如果只有部分是中文字符还可以使用英文字体
        return reg.test(this);
    };
    // 自定义打印页面模板
    function printHtml() {
        //隐藏打印按钮
        var obj = document.getElementById('toolbar');
        obj.style.display = 'none';
        //隐藏操作
        var cz = document.getElementById('caozuo');
        cz.style.display = 'none';
        //打印
        window.print();
        //显示打印按钮
        obj.style.display = 'block';
        //显示操作
        cz.style.display = 'block';
    }
</script>
</body>
</html>
